import { IRouteComponentProps } from 'umi'
import MyHeader from '@/components/header'
import MyFooter from '@/components/footer'
import TopJumper from "@/components/tojumper"
import React, { useEffect, useState } from 'react'
// import 
import "./index.less"

let Layout = ({ children, location, route, history, match }: IRouteComponentProps) => {
  const [show, switchShow] = useState(false); // 设置状态(控制头部隐藏显示)
  const [LastTime, setLastTime] = useState(0); // 设置状态(保存上一次距离顶部的距离)

  useEffect(() => {
    const listener = () => {
      if (LastTime !== parseInt(`${scrollY}`)) {
        switchShow(parseInt(`${scrollY}`) > LastTime)
        setLastTime(parseInt(scrollY.toString()))
      }
    }
    document.addEventListener("scroll", listener);
    return () => document.body.removeEventListener('scroll', listener); // 组件销毁后，取消监听
  }, )

  return <React.Fragment>
    <header className={show ? "active" : ""}>
      <MyHeader />
    </header>
    <main>
      {children}
      <TopJumper />
    </main>
    <footer>
      <MyFooter />
    </footer>

  </React.Fragment>
}
export default Layout